<template>
    <div id="home">
      <view-box>
        <router-view></router-view>
          <div class="k-tabbar">
            <tabbar slot="bottom">
              <tabbar-item link="worker" :selected="isWorker">
                <img slot="icon" src="../../assets/img/tab/ic_tab_cart.png">
                <img slot="icon-active" src="../../assets/img/tab/ic_tab_cart_press.png">
                <span slot="label">工作台</span>
              </tabbar-item>
              <tabbar-item link="/archivecenter" :selected="isActive">
                <img slot="icon" src="../../assets/img/tab/ic_tab_category.png">
                <img slot="icon-active" src="../../assets/img/tab/ic_tab_category_press.png">
                <span slot="label">背调</span>
              </tabbar-item>
              <tabbar-item link="/secret" :selected="isSecret">
                <img slot="icon" src="../../assets/img/tab/ic_tab_fun.png">
                <img slot="icon-active" src="../../assets/img/tab/ic_tab_fun_press.png">
                <span slot="label">职说</span>
              </tabbar-item>
              <tabbar-item link="/welfare" :selected="isWelfare">
                <img slot="icon" src="../../assets/img/tab/ic_tab_home.png">
                <img slot="icon-active" src="../../assets/img/tab/ic_tab_home_press.png">
                <span slot="label">福利</span>
              </tabbar-item>
              <tabbar-item link="/center" :selected="isCenter">
                <img slot="icon" src="../../assets/img/tab/ic_tab_my.png">
                <img slot="icon-active" src="../../assets/img/tab/ic_tab_my_press.png">
                <span slot="label">我的</span>
              </tabbar-item>
            </tabbar>
          </div>



      </view-box>

    </div>

</template>

<script>
import { Tabbar, TabbarItem ,ViewBox} from 'vux'

export default {
  data () {
    return {
      isWorker : false,
      isCenter : false,
      isSecret: false,
      isWelfare:false,
      isActive:false
    }
  },
  created () {
    // 组件创建完后获取数据，
    this.changeActive()
  },
  components: {
     Tabbar,
     TabbarItem,
    ViewBox
   },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'changeActive'
  },
  methods:{
    changeActive(){
      this.isWorker = false;
      this.isCenter = false;
      this.isSecret= false;
      this.isWelfare=false;
      this.isActive=false;
      var hash = window.location.hash.slice(2);
      console.log(hash.split('?')[0])
      var _hash = hash.split('?')[0];
      if (_hash == 'worker' ||_hash == ''){
        this.isWorker = true;
      }else if (_hash == 'center'){
        this.isCenter = true;
      }else if (_hash == 'welfare'){
        this.isWelfare = true;
      }else if (_hash == 'secret'){
        this.isSecret = true;
      }else if (_hash == 'archivecenter'){
        this.isActive = true;
      }

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #home{
    width:100%;
    height:100%;
  }
  .weui-tabbar{
    background-color: white;
  }
  .weui-tabbar__icon img{
    width: 2.2rem;
    height:2.2rem;
    margin-top: 0.2rem;
  }
  .weui-tabbar__label{
    font-size: 1.4rem;
  }
  .k-tabbar{
    position: fixed;
    bottom: 0;
    left:0;
    width: 100%;
    /* overflow: hidden; */
    height: 74px;
  }
</style>
